<template>
  <div id="root">
    <br>
    <div id="root-top">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
               class="demo-ruleForm">
        <template>
          <el-select v-model="ruleForm.part" placeholder="选择部门">
            <el-option
              v-for="item in kui"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
        <el-form-item style="display: inline-block">
          <el-button type="primary" @click="get_data()">按部门查询</el-button>
          <el-button type="success" @click="get_part_data">查所有用户</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--显示的用户信息-->
    <div id="root-buttom">
      <template>
        <el-table
          :data="tableUsers"
          border
          height="350"
          style="width: 100%">
          <el-table-column
            prop="username"
            label="工号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="100">
          </el-table-column>
          <el-table-column
            prop="rolename"
            label="权限"
            width="90">
          </el-table-column>
          <el-table-column
            prop="part_name"
            label="部门"
            width="90"
          >
          </el-table-column>
          <el-table-column
            prop="get_position"
            label="职位"
            width="130">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            width="180">
          </el-table-column>
          <el-table-column
            prop="sex_name"
            label="性别"
            width="80">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                dialogFormVisible
              >编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

    </div>
    <!--    分页器样式-->
    <div class="pagenation">
      <el-pagination
        small
        layout="prev, pager, next"
        :total="total"
        :page-size="page_size"
        @prev-click="prevfun"
        @next-click="nextfun"
        @current-change="currentchange"
      >
      </el-pagination>
    </div>
    <div>
      <el-divider content-position="right"><span class="el-icon-s-promotion"></span></el-divider>
    </div>
    <!--点击编辑时会弹出的对话框-->
    <el-dialog title="修改用户信息" style="text-align: center;font-size: 14px" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="公司工号" label-width="20%">
          <el-input v-model="form.username" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="员工名字" label-width="20%">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="员工邮箱" label-width="20%">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <!--         :label-width="formLabelWidth"-->
         <el-form-item label="权限选择" prop="options_value" label-width="20%">
          <el-select v-model="form.role" placeholder="权限选择">
            <el-option
              v-for="item in role_list"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门/职位" prop="options_value" label-width="20%">
          <el-cascader
            placeholder="部门/职位"
            v-model="option_value"
            :options="editForm.options">
          </el-cascader>
        </el-form-item>
        <el-form-item label="选择性别" label-width="20%">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="edituser">确 定</el-button>
      </div>
    </el-dialog>
    <!--点击删除时，会弹出的提示框-->
  </div>
</template>

<script>
  import router from '@/router'

  export default {
    name: 'ShowUserView',
    data () {

      return {
        //记录当前页的页码
        curren_page:1,
        option_value:[],
        //是否展示对话框
        show_slot: 'reference',
        //部门/职位拿到的树
        editForm: {
          options: [],//展示的数据
        },
        dialogFormVisible: false,
        //权限的列表，直接在前端实现
        role_list: [
          {
            value: 1,
            label: '超级管理员'
          },
          {
            value: 2,
            label: '管理员'
          },
          {
            value: 3,
            label: '部门经理'
          },
          {
            value: 4,
            label: '普通员工'
          },
        ],
        //拿到用户要进行修改的数据
        form: {
          //权限问题
          role: '',
          id: '',
          username: '',
          name: '',
          sex: '',
          email: '',
          options_value: [],//拿到用户选择的部门id和职位id
        },
        formLabelWidth: '120px',
        //上面的修改用户信息的对话框
        kui: [],//初始化部门数据
        tableUsers: [],//初始化用户数据,分页展示的数据
        //需要展示的数据的总数
        total: 5, //先设置给初始值，只给空字符串''会报typeerror
        //下一页
        next: '',
        //上一页
        prev: '',
        //每页总数
        page_size: 1,//先设置给初始值，只给空字符串''会报typeerror
        ruleForm: {
          part: '',//用户选择要查看的部门的所有员工，id保存到这个
        },
        has_border: true,//表格带边框
        rules: {
          part: [
            {
              required: true,
              message: '请选部门',
              trigger: 'change'
            }
          ]
        }
      }
    },
    methods: {
      //获取部门和职位的级联数据
      get_part_position () {
        this.$axios({
          method: 'get',
          url: this.$settings.base_url + '/user/userchoice/',
          // headers: {
          //   'AUTHORIZATION': sessionStorage.getItem('oatoken')
          // }
        }).then(res => {
          this.editForm.options = res.data.data.part_position //拿到部门和部门内的职位
          this.staff_id = res.data.data.staff_id //拿到普通员工对应的职位
          this.manager_id = res.data.data.manager_id //拿到经理对应的职位
          this.boss_id = res.data.data.boss_id //拿到管理员对应的职位
        })
      },
      //初始化部门数据
      get_part () {
        this.$axios({
          url: this.$settings.base_url + '/user/partforposition/',
          method: 'get',
          // headers: { 'AUTHORIZATION': sessionStorage.getItem(this.$settings.base_token) }请求拦截器上实现了
        }).then(res => {
          if (res.data.code === 100) {
            this.kui = res.data.data
          } else {
            this.$message.error('获取部门数据失败！！')
          }
        })
      },
      //获取用户数据，带分页功能
      get_data (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/usermessage/?page=` + page,
          method: 'get',
          params: { 'part': this.ruleForm.part },
        }).then(res => {
          this.tableUsers = res.data.results
          this.total = res.data.count
          this.page_size = res.data.page_size
        }).catch(error => {
          console.log(error)
        })
      },
      //获取用户信息，不带条件的查询，带分页功能
      get_part_data () {
        //查询所有用户，展示出出来
        // console.log(this.ruleForm.part)
        this.ruleForm.part = ''
        this.get_data()

      },

      //分页器的三个函数
      prevfun (value) {
        //value拿到的当前的页码
        this.get_data(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_data(value)
      },
      //分页页码变化的时候就会触发
      currentchange (value) {
       this.curren_page=value
        this.get_data(value)
      },
      //点击编辑触发的函数
      handleEdit (index, row) {
        //拿到被点击的用户的信息
        //将对话的输入框，进行初始化
        this.form.role = row.role
        this.form.username = row.username
        this.form.name = row.name
        this.form.email = row.email
        this.form.id = row.id
        this.form.sex = row.sex
        // console.log(row)
        var arr=[]
        this.$set(arr,0,row.part_f)
        this.$set(arr,1,row.position)
        this.option_value=arr
        //点击编辑后，弹出对话框
        this.dialogFormVisible = true
      },
      //删除函数
      handleDelete (index, row) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            url: this.$settings.base_url + `/user/updateuser/${row.id}/`,
            method: 'delete',
          }).then(res => {
            console.log(res)
            if (res.data.code === 100) {
              this.$message({
                type: 'success',
                message: '删除用户：' + res.data.name + '成功'
              })
              this.get_data()
            } else {
              this.$message.error('删除的用户不存在！！')
            }

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      //对话框中，点击了确定会触发修改用户的函数,修改用户
      edituser () {
        let datas = {
          username: '',
          name: '',
          email: '',
          role: ''
          //拿到用户选择的部门id和职位id
        }
        datas.name = this.form.name
        datas.username = this.form.username
        datas.email = this.form.email
        datas.role = this.form.role
        // datas.id = this.form.id
        this.dialogFormVisible = false
        if (this.form.sex !== '') {
          datas['sex'] = this.form['sex']
        }
        datas['part_f'] = this.option_value[0]
        datas['position'] = this.option_value[1]
        console.log(datas)
        this.$axios({
          url: this.$settings.base_url + `/user/updateuser/${this.form.id}/`, //${this.form.id}
          method: 'patch',
          data: datas
        }).then(res => {
          if (res.data.code === 500) {
            this.$message.error(res.data.error)
          } else {
            this.$message.success('更新用户成功')//更新用户成功后刷新数据
            // window.location.reload()
            this.get_data( this.curren_page)
          }
        })
      }
    },
    mounted () {
      //初始化用户数据
      this.get_data()
      //初始化部门信息
      this.get_part()
      //获取部门与对于职位的数据
      //获取创建用户需要的系统角色和部门职位
      this.get_part_position()
    }
  }
</script>

<style scoped>
  #root {
    text-align: left;
    padding: 20px;
  }

  #root-top {
    height: 100px;
    background-color: #fdfdfd;
    line-height: 100px;
  }

  #root-buttom {
    display: block;
    height:360px;
  }

  .pagenation {
    text-align: center;
    font-size: 18px;
    margin-top: 10px;

  }

  .el-dialog {
    text-align: left;
    margin-right: 100px;
  }

</style>
